<template>
  <div class="ctable" :style="'height:'+(option.height?option.height+'px':'auto')">
    <el-table
      :data="data"
      :height="'100%'"
      border
      @select="checkboxSelect"
      @select-all="checkboxSelectAll"
      @selection-change="selectionChange"
      style="width: 100%">
      <!-- 默认350 -->
      <el-table-column
        v-if="option.isCheckbox"
        type="selection"
        fixed
        width="40">
      </el-table-column>
      <el-table-column
        v-if="option.isIndex"
        width="65"
        type="index"
        label="序号"
        fixed
        align='center'
        :index="indexMethod">
      </el-table-column>
      <template v-for="(item,index) in option.items">
        <el-table-column
          v-if="!item.hide"
          :key="index"
          :prop="item.key"
          :label="item.label"
          :min-width="item.min_width"
          :width="item.width"
          :align="item.align"
          :formatter="formatterColumn"
          :sortable="item.sortable"
          >
          <slot :name="'table_'+item.slotName"></slot>
        </el-table-column>
      </template>
      <el-table-column 
        v-if="option.isOperation" 
        :fixed="option.operationIsFixed?option.operationIsFixed:false" 
        :label="option.operationLabel?option.operationLabel:'操作栏'" 
        :width="option.operationWidth?option.operationWidth:'250'">
        <template slot-scope="scope">
          <el-button
            v-if="option.viewBtn"
            size="mini"
            type="primary"
            @click="handleView(scope.$index, scope.row)">查 看</el-button>
          <el-button
            v-if="option.editBtn"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编 辑</el-button>
          <el-button
            v-if="option.deleteBtn"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props:{
    data:{
      type:Array,
      default:function(){
        return []
      }
    },
    option:{
      type:Object,
      default:function(){
        return null
      }
    },
  },
  computed: {
    ...mapGetters([
      "dictionary"              //导入字典
    ])
  },
  // created(){
  //   console.log('字典')
  //   console.log(this.dictionary)
  // },
  methods: {
    //索引的处理方法，从0开始
    indexMethod(index) {
      return index+1;
    },
    //当用户手动勾选数据行的 Checkbox 时触发的事件
    checkboxSelect(selection, row){//row当前行
      this.$emit('getSelection',{selection})
      this.$emit('getCurrentRow',{row})
    },
    //当用户手动勾选全选 Checkbox 时触发的事件
    checkboxSelectAll(selection){
      this.$emit('getSelection',{selection})
    },
    //当选择项发生变化时会触发该事件
    selectionChange(selection){
      this.$emit('getSelection',{selection})
    },
    //查看事件
    handleView(index, row) {
      this.$emit('handleView',{index, row})
    },
    //编辑事件
    handleEdit(index, row) {
      this.$emit('handleEdit',{index, row})
    },
    //删除事件
    handleDelete(index, row) {
      this.$emit('handleDelete',{index, row})
    },
    //对字典进行筛选
    formatterColumn(row,column,cellValue,index){//当前行,当前列,当前格子值,当前行数
      let key=column.property
      let item=this.option.items[this.findIndex(key,this.option.items)]
      if(item.dicVal){
        let {dicVal}=item
        return this.findDataText(cellValue,this.dictionary[dicVal])
      }else if(item.setDicVal){
        let { setDicVal } = item
        return this.findDataText(cellValue,setDicVal)
      }else{
        return cellValue
      }
    },
    //找到同key值的对象在数组中的索引
    findIndex(key,array){
      let index=-1
      for(let i=0;i<array.length;i++){
        if(array[i].key===key){
          index=i;
          break;
        }
      }
      return index
    },
    //找到与dataCode对应的dataText
    findDataText(dataCode,array){
      let dataText=''
      for(let i=0;i<array.length;i++){
        if(dataCode===array[i].dataCode){
          dataText=array[i].dataText
          break;
        }
      }
      return dataText
    },
  }
}
</script>

<style lang="scss">
  $boder-color:#EBEEF5;//设置表格边框颜色
  $hover-color:skyblue;//设置选中表格的颜色

  .ctable{
    .el-table{
      width: calc(100% - 100px) !important;
      td{
        border-color: $boder-color;
      }
    }
    .el-table--border {
      border-right: 1px solid $boder-color; 
      border-bottom: 1px solid $boder-color;
      border-color: $boder-color;
      th,td{
        border-color: $boder-color;
      }
      th.gutter:last-of-type{
        border-color: $boder-color;
      }
    }

    .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
      background-color: $hover-color;
    }
  }
  
</style>